<template>
  <div class="timetable-container">
    <el-table :data="gradeTableData" class="data_table center-align" style="ali: center">
      <el-table-column prop="id" label="成绩单编号" align="center">
      </el-table-column>
      <el-table-column prop="courses.courseName" label="课程名称" align="center">
      </el-table-column>
      <el-table-column prop="courses.courseType" label="课程类型" align="center">
      </el-table-column>
      <el-table-column label="平时分" align="center">
        <template v-slot="scope">
          {{ scope.row.attendanceScore || 0 }}
        </template>
      </el-table-column>
      <el-table-column label="作业分" align="center">
        <template v-slot="scope">
          {{ scope.row.assignmentScore || 0 }}
        </template>
      </el-table-column>
      <el-table-column label="小组分" align="center">
        <template v-slot="scope">
          {{ scope.row.examScore || 0 }}
        </template>
      </el-table-column>
      <el-table-column label="总分" align="center">
        <template v-slot="scope">
          {{ scope.row.totalScore || 0 }}
        </template>
      </el-table-column>
      <!-- <el-table-column label="操作" align="center">
        <template v-slot="scope">
          <el-button type="text" size="small" class="blueBug" @click="queryCourse()">
            查看
          </el-button>
          <el-button type="text" size="small" class="delBut" @click="quitCourseHandle(scope.row.id)">
            退出课程
          </el-button>
        </template>
      </el-table-column> -->
    </el-table>
  </div>
</template>

<script>
import { getCoursesExtAPI_Student, getGradeRecordsAPI_Student } from "@/api/student/courses";
import { getUserIDLocalStorage } from "@/utils/utilLocalStorage";
import { deleteSudentCourseRecordAPI } from '@/api/score';

export default {
  name: 'achievement',
  data() {
    return {
      gradeTableData: [],
    }
  },

  mounted() {
    this.getGradeRecords()
  },
  methods: {
    cellStyle({ row, column, rowIndex, columnIndex }) {
      return 'text-align: center;';
    },
    // 取学生的所有课程成绩
    getGradeRecords() {
      getGradeRecordsAPI_Student(getUserIDLocalStorage()).then((res) => {
        // console.log('getGradeRecords',res)
        // for (let i = 0; i < res.data.length; i++) {  //根据课程id查询课程名称
        //   this.getCoursesExt(res.data[i])
        //   // console.log(res.data[i]);
        // }
        this.gradeTableData = res.data
      }).catch(() => {
        // this.$message.error('数据为空或服务器错误！')
      })
    },
    // 取课程信息
    getCoursesExt(data) {
      getCoursesExtAPI_Student(data.courseId, getUserIDLocalStorage()).then((res) => {
        // console.log('取课程信息',res.data.coursesExt)
        data.coursesExt = res.data.coursesExt
      })
    },
    quitCourseHandle(gradeRecordId) {
      this.$confirm('确认删除该学生, 是否继续?', '学生关于此门课程的信息被一并删除。确定删除？', {
        confirmButtonText: '删除',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.quitCourse(gradeRecordId)
        // deleteSudentCourseRecordAPI(gradeRecordId)
      })

    },
    async quitCourse(gradeRecordId) {
      try {
        const res = await deleteSudentCourseRecordAPI(gradeRecordId)
        // 处理资源的代码
        if (res.code === 200) {
          this.getGradeRecords()
          this.$message.success(res.message)
        }
        // 处理资源的代码
      } catch (error) {
        // 处理异常的代码
        console.error('Error fetching delete:', error);
      }
    }

  }
}
</script>

<style lang="scss" scoped></style>
